<template>
	<div class="system-container">
		<div class="table-search">
			<n-form
				ref="formRef"
				inline
				label-placement="left"
				:model="searchForm"
				class="search-form"
			>
				<n-form-item label="字典名称" path="dictTypeName">
					<n-input
						v-model:value="searchForm.dictTypeName"
						clearable
						placeholder="请输入"
					/>
				</n-form-item>
				<n-form-item label="字典编号" path="dictTypeCode">
					<n-input
						v-model:value="searchForm.dictTypeCode"
						clearable
						placeholder="请输入"
					/>
				</n-form-item>
				<n-form-item>
					<n-button type="primary" @click="handleSearchClick">查询</n-button>
				</n-form-item>
			</n-form>

			<div>
				<n-button type="primary" @click="handleAddClick">新增</n-button>
			</div>
		</div>

		<ln-data-table
			class="mytable"
			:columns="columns"
			:data="tableData"
			:pagination="paginationReactive"
		/>

		<Modal
			v-model:show="modalForm.modalVisible"
			:modal-type="modalForm.modalType"
			:modal-data="modalForm.modalData"
			@update="modalForm.modalType = ModalTypeEnum.update"
			@close="handLnModalClose"
		/>

		<ModalConfig
			v-model:show="configModalForm.modalVisible"
			:modal-data="configModalForm.modalData"
			@close="handlConfigModalClose"
		/>
	</div>
</template>

<script lang="tsx" setup>
import { useI18n } from 'vue-i18n';
import { useTable } from '@/hooks/useTable';
import type { DataTableColumns, DataTableColumn } from 'naive-ui';
import { LnButton } from '@/components/LnButton';
import { useDialog, useMessage } from 'naive-ui';
import { getDicList, deleteDictType } from '@/api/system/dictionary';
import type { GetDicListReq, DicListRow } from '@/api/system/dictionary';
import { ModalTypeEnum } from '@/utils/enum';

import Modal from './Modal.vue';
import ModalConfig from './ModalConfig.vue';

const { t } = useI18n();
const dialog = useDialog();
const message = useMessage();

// 搜索
const searchForm = reactive<GetDicListReq>({
	dictTypeName: '',
	dictTypeCode: '',
});
function handleSearchClick() {
	paginationReactive.page = 1;
	getTableList();
}
// table
const actionColumn: DataTableColumn<DicListRow> = {
	title: '操作',
	key: 'action',
	width: '160',
	render(row) {
		return (
			<div class="table-action">
				<LnButton onClick={() => handleConfigClick(row)}>配置</LnButton>
				<LnButton onClick={() => handleDetailClick(row)}>详情</LnButton>
				<LnButton onClick={() => handleUpdateClick(row)}>编辑</LnButton>
				<LnButton type="danger" onClick={() => handleDeleteClick(row)}>
					删除
				</LnButton>
			</div>
		);
	},
};
const columns: DataTableColumns<DicListRow> = [
	{
		title: '字典名称',
		key: 'dictTypeName',
		width: '',
	},
	{
		key: 'dictTypeCode',
		title: '字典编号',
		width: '',
	},
	{
		key: 'detailValueType',
		title: '数据类型',
		width: '',
		render(row) {
			return row.detailValueType ? 'Number' : 'String';
		},
	},
	{
		key: 'remark',
		title: '描述',
		width: '',
	},

	actionColumn,
];
const { tableData, paginationReactive, getTableList } = useTable<DicListRow>({
	request: getDicList,
	requestParam: searchForm,
});
getTableList();

// modal
const modalForm = reactive({
	modalVisible: false,
	modalType: ModalTypeEnum.add,
	modalData: {},
});
function handLnModalClose(data) {
	if (data) {
		getTableList();
	}
	modalForm.modalVisible = false;
}
// config modal
const configModalForm = reactive({
	modalVisible: false,
	modalData: {},
});
function handlConfigModalClose(data) {
	configModalForm.modalVisible = false;
}

/* ******操作****** */
// 配置
function handleConfigClick(row) {
	configModalForm.modalData = { ...row };
	configModalForm.modalVisible = true;
}
// add
function handleAddClick() {
	modalForm.modalType = ModalTypeEnum.add;
	modalForm.modalVisible = true;
}
// detail
function handleDetailClick(row: DicListRow) {
	modalForm.modalType = ModalTypeEnum.detail;
	modalForm.modalData = { ...row };
	modalForm.modalVisible = true;
}
// update
function handleUpdateClick(row: DicListRow) {
	modalForm.modalType = ModalTypeEnum.update;
	modalForm.modalData = { ...row };
	modalForm.modalVisible = true;
}
// delete
function handleDeleteClick(row: DicListRow) {
	dialog.warning({
		title: t('msg.warning'),
		content: t('msg.normalTip'),
		positiveText: t('btn.confirm'),
		negativeText: t('btn.cancel'),
		onPositiveClick: async () => {
			await deleteDictType({ dictTypeId: row.id! });
			getTableList();
			message.success(t('msg.deleteCompleted'));
		},
	});
}
</script>

<style lang="scss" scoped>
.system-container {
	display: flex;
	height: 100%;
	background-color: #343946;
	box-sizing: border-box;
	flex-direction: column;
}
</style>
